<template>
  <div class="eleHeader" @click="openCover">
    <!-- 1.0 商家介绍 -->
    <div class="container">
      <!-- 1.1 头像 -->
      <img
        :src="seller.avatar"
        alt="商家图片"
        width="64"
        height="64"
        class="avatar"
      />
      <!-- 1.2 商家信息介绍 -->
      <div class="content">
        <!-- 1.2.1 商家名字 -->
        <div class="title">
          <span class="ele-brand"></span>
          <span class="name">{{ seller.name }}</span>
        </div>
        <!-- 1.2.2 商家配送时间 -->
        <div class="desc">
          {{ seller.description }}/{{ seller.deliveryTime }}分钟送达
        </div>
        <!-- 1.2.3 优惠信息 -->
        <ul class="supports">
          <li
            v-show="i === index"
            :key="i"
            v-for="(support, i) in seller.supports"
            class="supports-items"
          >
            <span
              class="supports-icon"
              :class="supportsClassMap[support.type]"
            ></span>
            {{ support.description }}
          </li>
        </ul>
      </div>

      <!-- 1.3 优惠个数 -->
      <div class="support-count">
        <span class="count">{{ isSupports || 0 }}个</span>
        <span class="icon-keyboard_arrow_right"></span>
      </div>
    </div>

    <!-- 2.0 商家公告 -->
    <div class="bulletin">
      <span class="bulletin-icon"></span>
      {{ seller.bulletin }}
      <span class="icon-keyboard_arrow_right"></span>
    </div>

    <!-- 3.0 背景 -->
    <div class="bg-header">
      <img :src="seller.avatar" alt="" width="100%" height="100%" />
    </div>

    <!-- 4.0 遮罩层 -- 组件 -->
    <cover
      v-show="show"
      @closeCover="closeCover"
      :seller="seller"
      :supportsClassMap="supportsClassMap"
    />
  </div>
</template>

<script>
import cover from "./cover";
export default {
  name: "eleHeader",
  data: () => ({
    show: false, // 默认不显示遮罩层
  }),
  props: ["seller", "index", "supportsClassMap"],
  created() {},
  // 计算属性
  computed: {
    isSupports() {
      // 如果数据存在（请求回来了数据），就显示，否则默认显示为0
      return this.seller.supports && this.seller.supports.length;
    },
  },
  methods: {
    // 打开遮罩层
    openCover() {
      this.show = !this.show;
    },
    // 关闭遮罩层
    closeCover() {
      this.show = !this.show;
    },
  },
  components: {
    cover,
  },
};
</script>

<style lang="scss" scoped>
.eleHeader {
  position: relative;
  background: eleblack(0.5);
  .container {
    position: relative;
    display: flex;
    padding: 24px 12px 18px 24px;
    color: $e-white;
    .avatar {
      flex: 0 0 64px;
      margin-right: 16px;
      border-radius: 2px;
    }
    .content {
      flex: 1;
      padding: 2px 0;
      .title {
        line-height: 18px;
        font-weight: 700;
        .ele-brand {
          vertical-align: top;
          display: inline-block;
          width: 30px;
          height: 18px;
          margin-right: 6px;
          @include bg-img("/image/brand", 30px 18px);
        }
        .name {
          font-size: 16px;
        }
      }

      .desc {
        line-height: 12px;
        font-size: $sm-size;
        margin: 8px 0 10px;
      }
      .supports {
        list-style: none;
        font-size: $xs-size;
        font-weight: 200;
        line-height: 12px;
        height: 12px;
        width: 75%;
        overflow: hidden;
        .supports-items {
          // 如果优惠信息的内容文本超出页面长度，
          // 则把超出部分隐藏
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .supports-icon {
          vertical-align: top;
          display: inline-block;
          width: 12px;
          height: 12px;
          margin-right: 4px;
          @include supports(1, 12px 12px);
        }
      }
    }
    .support-count {
      position: absolute;
      right: 6px;
      bottom: 18px;
      padding: 7px 8px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 14px;
      font-size: $xs-size;
      line-height: 12px;
      margin-right: 2px;
      .icon-keyboard_arrow_right {
        vertical-align: bottom;
      }
    }
  }

  .bulletin {
    position: relative;
    height: 28px;
    line-height: 28px;
    // "三剑客" :让内容只在一行内显示，超出文本用 ... 显示
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    //-------------------------
    background: eleblack(0.2);
    font-size: $xs-size;
    color: $e-white;
    padding: 0 12px;
    // padding-right: 4px;
    // margin-right: 4px;
    .bulletin-icon {
      display: inline-block;
      vertical-align: middle;
      width: 22px;
      height: 12px;
      margin-right: 4px;
      @include bg-img("/image/bulletin", 22px 12px);
    }
    .icon-keyboard_arrow_right {
      position: absolute;
      right: 8px;
      top: 9px;
    }
  }

  .bg-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(10px);
  }
}
</style>